<template>
  <div id="app">
    <transition :name="transitionName">
      <!--<van-loading
        :key="1"
        size="50px"
        color="#fff"
        vertical
        v-if="loading"
        class="fixed Router"
        >正在努力请求数据...
      </van-loading>
      <div class="fixed_screen Router" id="mask" v-if="loading" :key="2"></div>-->
      <router-view class="Router" />
    </transition>
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  name: "App",
  computed: {
    ...mapState(["loading"])
  },
  data() {
    return {
      transitionName: ""
    };
  },
  watch: {
    $route() {
      this.transitionName = "slide-left";
    }
  },
  components: {}
};
</script>
<style lang="stylus">
  .slide-left-enter
    opacity: 0;
    transform: translate(100%, 0);

  .slide-left-leave-active
    opacity: 0;
    transform: translate(-100% 0);

  #app
    font-family Microsoft YaHei

    .Router
      position: absolute
      width: 100%
      transition: all .7s ease

  .van-loading.fixed
    position: fixed
    top: 50%
    left: 50%
    z-index: 90
    -webkit-transform: translateX(-50%) translateY(-50%);

  .fixed_screen
    position: fixed
    top: 0
    left: 0
    margin: auto
    z-index: 89
    width: 100%
    height: 100%
    background rgba(0, 0, 0, .5)
</style>
